<template>
  <Modal v-model="visible" :mask-closable="false" :width="width"
    @on-cancel="$emit('cancel',$event)">
    <p slot="header">{{title}}</p>
    <slot></slot>
    <template slot="footer">
      <template v-if="$scopedSlots['footer']">
        <slot name="footer"></slot>
      </template>
      <template v-else>
        <Button type="primary" :loading="loading"
          @click="$emit('submit',$event)">确定</Button>
        <Button type="dashed" @click="$emit('reset',$event)">重置</Button>
        <Button type="dashed" @click="$emit('cancel',$event)">关闭</Button>
      </template>
    </template>
  </Modal>
</template>

<script>
export default {
  name: 'EditableView',
  props: ['width', 'value', 'title'],
  data() {
    return {
      visible: this.value,
      loading: false
    };
  },
  watch: {
    value(val) {
      this.visible = val;
    }
  }
};
</script>
